<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    tr,td,th{
        width: 100px;
        height: 60px;
        border: 1px solid gray;
    }
    table{
        border-collapse: collapse;
        text-align: center;
    }
</style>
<body>
    <script>
        // 使用节点操作 在页面上根据数据显示出表格，并且实现删除功能
        var arr = [
            {
                name: 'Jack',
                age: 18,
                gender: '男'
            }, {
                name: 'Rose',
                age: 20,
                gender: '女'
            }, {
                name: 'Top',
                age: 22,
                gender: '男'
            }
        ];
        var tableDom = document.createElement('table');
        var theadDom = document.createElement('thead')
        var tbodyDom = document.createElement('tbody')
        var thnameDom = document.createElement('th')
        var thageDom = document.createElement('th')
        var thgenderDom = document.createElement('th')
        var thfnDom = document.createElement('th')



        var thnameNode = document.createTextNode('名字')
        thnameDom.appendChild(thnameNode)
        theadDom.appendChild(thnameDom)
        var thageNode = document.createTextNode('年龄')
        thageDom.appendChild(thageNode)
        theadDom.appendChild(thageDom)
        var thgenderNode = document.createTextNode('性别')
        thgenderDom.appendChild(thgenderNode)
        theadDom.appendChild(thgenderDom)
        var thfnNode = document.createTextNode('操作')
        thfnDom.appendChild(thfnNode)
        theadDom.appendChild(thfnDom)
        tableDom.appendChild(theadDom)
        console.log(tableDom);
        // window.body.innerHTML=(tableDom)
        // document.querySelector('theadDom').insertBefore(thnameDom, document.querySelector('theadDom'));
        // theadDom.innerHTML = "<th>名字</th><th>年龄</th><th>性别</th><th>操作</th>"
        // tableDom.appendChild(theadDom);
        // window.innerHTML=(tableDom);

        // var nameDom = [];
        // var ageDom = [];
        // var genderDom = [];
        var tb = ""
        arr.forEach(function (item) {
        //     var trDom = document.createElement('tr')
        // var tdnameDom = document.createElement('td')
        // var tdageDom = document.createElement('td')
        // var tdgenderDom = document.createElement('td')
        // var tdfnDom = document.createElement('td')
        // var buttonDom = document.createElement('button')

            // var tdnameNode = document.createTextNode(`${item.name}`);
            // tdnameDom.appendChild(tdnameNode);
            // trDom.appendChild(tdnameDom);
            // var tdageNode = document.createTextNode(`${item.age}`);
            // tdageDom.appendChild(tdageNode);
            // trDom.appendChild(tdageDom);
            // var tdgenderNode = document.createTextNode(`${item.gender}`);
            // tdgenderDom.appendChild(tdgenderNode);
            // trDom.appendChild(tdgenderDom);
            // var tdfnNode = document.createTextNode("删除");
            // buttonDom.appendChild(tdfnNode);
            // tdfnDom.appendChild(buttonDom);
            // trDom.appendChild(tdfnDom);
            // tbodyDom.appendChild(trDom);
            // tb +=trDom;
            // console.log(tbodyDom);






            tb += `<tr><td>${item.name}</td><td>${item.age}</td><td>${item.gender}</td><td><button onclick="deleteTr(this)">删除</button></td></tr>`
            tbodyDom.innerHTML = tb
            // // var name = arr[i].name;
            // // var age = arr[i].age;
            // // var gender = arr[i].gender;
            // // nameDom.push(name);
            // // ageDom.push(age);
            // // genderDom.push(gender);
        })
        tableDom.appendChild(tbodyDom);
        document.querySelector("body").appendChild(tableDom)
        // console.log(tableDom);
        function deleteTr(obj){
            var trDom = obj.parentElement.parentElement;
            // console.log(trDom);
            document.querySelector('tbody').removeChild(trDom);
        }
    </script>
</body>
</html>